<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>遍历节点</title>
    <style type="text/css">
      div, span {
        width: 140px;
        height: 60px;
        margin: 20px;
        background: #9999CC;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Roman;
      }

    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

      $(function () {
        //查找所有子元素 (class 为 one 的div的)
        $("#b1").click(
                function () {
                  $("div.one").children().each(function () {
                    alert("子div的内容是 = " + $(this).text());
                  })
                }
        )

        //获取后面的同辈元素 (class 为 one 的div的)
        $("#b2").click(
                function () {
                  //这里filter("div") 表示过滤，只获取同辈中的div元素
                  $("div.one").nextAll().filter("div").each(function () {
                    alert("后面的同辈div的内容是 = " + $(this).text());
                  })
                  alert("后面的紧邻的div的内容是 = " + $("div.one").next().text())
                }
        )

        //获取前面的同辈元素 (class 为 one 的div的)
        $("#b3").click(
                function () {
                  $("div.one").prevAll().filter("div").each(function (){
                    alert("前面的同辈div的内容= " + $(this).text());
                  })
                  alert("前面的紧邻的div的内容是 = " + $("div.one").prev().text())
                }
        )

        //获取所有的同辈元素 (class 为 one 的div的)
        $("#b4").click(
                function () {
                  $("div.one").siblings().filter("div").each(
                          function () {
                            alert("所有同辈div的内容 = " + $(this).text())
                          }
                  )
                }
        )
      })
    </script>
  </head>
  <body>
  <input type="button" value="查找所有子元素 (class 为 one 的div的)" id="b1"/><br/><br/>
  <input type="button" value="获取后面的同辈元素 (class 为 one 的div的)" id="b2"/><br/><br/>
  <input type="button" value="获取前面的同辈元素 (class 为 one 的div的)" id="b3"/><br/><br/>
  <input type="button" value="获取所有的同辈元素 (class 为 one 的div的)" id="b4"/>
  <hr/>
  <div>
    ccccccc
  </div>

  <p class="one">
    ccccccc
  </p>

  <div class="one">
    <div id="one">
      XXXXXXXXX one
    </div>

    <div id="two">
      XXXXXXXXX two
    </div>

    <div id="three">
      XXXXXXXXX three
    </div>

    <div id="four">
      XXXXXXXXX four
    </div>
  </div>
  <div>
    tttttttttt
  </div>
  <div>
    aaaaaaa
  </div>
  <div>bbbbbb</div>
  <p>hello, pp</p>
  </body>
</html>